<template>
  <div class="my-jobs-container">
    <div class="header">
      <h2>我发布的职位</h2>
      <router-link to="/post-job" class="post-job-btn">发布新职位</router-link>
    </div>
    
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <div v-else-if="jobs.length === 0" class="empty-state">
      <p>您还没有发布任何职位。</p>
      <router-link to="/post-job" class="post-job-link">立即发布第一个职位</router-link>
    </div>
    
    <div v-else class="jobs-list">
      <div v-for="job in jobs" :key="job.id" class="job-card">
        <div class="job-header">
          <h3>{{ job.title }}</h3>
          <div class="job-actions">
            <router-link :to="`/post-job/${job.id}`" class="edit-btn">编辑</router-link>
            <button @click="deleteJob(job.id)" class="delete-btn">删除</button>
          </div>
        </div>
        
        <div class="job-details">
          <p><strong>公司:</strong> {{ job.company }}</p>
          <p><strong>地点:</strong> {{ job.location }}</p>
          <p><strong>薪资:</strong> {{ job.salary || '面议' }}</p>
                    <p><strong>发布时间:</strong> {{ formatDate(job.createdAt) }}</p>
                    <p><strong>申请人数:</strong> {{ getApplicationStatsText(job.id) }}</p>
        </div>
        
        <div class="job-description">
                  <p><strong>职位描述:</strong></p>
                  <p>{{ job.description }}</p>
                </div>
                <div class="job-actions">
                  <router-link :to="`/jobs/${job.id}`" class="view-applications-btn">查看申请详情</router-link>
                </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getJobsByRecruiter, removeJob } from '../services/jobService';
import { getCurrentUser } from '../services/authService';
import { getApplicationStats } from '../services/applicationService';

const router = useRouter();

// 数据
const jobs = ref([]);
const loading = ref(true);

// 加载职位数据
const loadJobs = () => {
  try {
    const currentUser = getCurrentUser();
    jobs.value = getJobsByRecruiter(currentUser.id);
  } catch (err) {
    console.error('加载职位失败:', err);
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN');
};

// 获取申请统计信息文本
const getApplicationStatsText = (jobId) => {
  try {
    const stats = getApplicationStats(jobId);
    return `总${stats.total} 待处理${stats.pending} 已接受${stats.accepted} 已拒绝${stats.rejected}`;
  } catch (err) {
    return '0';
  }
};

// 删除职位
const deleteJob = (jobId) => {
  if (confirm('确定要删除这个职位吗？')) {
    try {
      removeJob(jobId);
      // 重新加载职位列表
      loadJobs();
    } catch (err) {
      alert('删除职位失败: ' + err.message);
    }
  }
};

// 组件挂载时加载数据
onMounted(() => {
  loadJobs();
});
</script>

<style scoped>
.my-jobs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header h2 {
  margin: 0;
  color: #2c3e50;
}

.post-job-btn {
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.post-job-btn:hover {
  background-color: #2980b9;
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #7f8c8d;
}

.empty-state {
  text-align: center;
  padding: 2rem;
}

.empty-state p {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 1rem;
}

.post-job-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.post-job-link:hover {
  text-decoration: underline;
}

.jobs-list {
  display: grid;
  gap: 1.5rem;
}

.job-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.job-header h3 {
  margin: 0;
  color: #2c3e50;
}

.job-actions {
  display: flex;
  gap: 0.5rem;
}

.edit-btn,
.delete-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.edit-btn:hover {
  background-color: #2980b9;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover {
  background-color: #c0392b;
}

.job-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.job-details p {
  margin: 0;
  color: #34495e;
}

.job-description p {
  margin: 0 0 0.5rem 0;
  color: #34495e;
  line-height: 1.5;
}

.job-description p:first-child {
  font-weight: 500;
}

.view-applications-btn {
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
  display: inline-block;
  margin-top: 1rem;
}

.view-applications-btn:hover {
  background-color: #2980b9;
}
</style>